<template>
    <div class="background_div">
        <el-container>
            <el-header>
                <Menu></Menu>
            </el-header>
            <el-container>
                <el-main style="padding: 0;">
                    <el-container>
                        <el-main class="Top_div base_margin">
                            <div class="Top_base_div">
                                <div class="Top_avater_div">
                                    <el-avatar class="UserAvatar" :size="50" :src="circleUrl" />
                                </div>
                                <div class="Top_Message_div">
                                    <p class="UserMessage" style="font-size: large;">{{ UserMessage.username }}</p>
                                    <p class="UserMessage" style="font-size: small;">{{ UserMessage.usernote }}</p>
                                </div>
                                <div class="Top_details_div">
                                    <el-row>
                                        <el-col :span="8">
                                            <div class="column">
                                                <div class="text">点赞数</div>
                                                <div class="number">{{ UserMessage.likenum }}</div>
                                            </div>
                                        </el-col>

                                        <el-col :span="8">
                                            <div class="column">
                                                <div class="text">粉丝数</div>
                                                <div class="number">{{ UserMessage.fansnum }}</div>
                                            </div>
                                        </el-col>

                                        <el-col :span="8">
                                            <div class="column">
                                                <div class="text">学习时长</div>
                                                <div class="number">{{ UserMessage.learntime }}</div>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>

                        </el-main>



                    </el-container>

                </el-main>



            </el-container>

        </el-container>
        <div class="Top_options_div base_margin">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="主页" name="first">
                    <template #label>
                        <span class="custom-tabs-label">
                            <!-- <el-icon :size="20" class="tab_icon" style="margin-left: 10px;">
                                <House />
                            </el-icon> -->
                            <img src="../assets/主页.png" height="25">
                        </span>
                        <span class="tab_span">主页</span>
                    </template>
                </el-tab-pane>
                <el-tab-pane label="课程" name="second">
                    <template #label>
                        <span class="custom-tabs-label">
                            <!-- <el-icon :size="20" class="tab_icon" style="margin-left: 10px;">
                                <House />
                            </el-icon> -->
                            <img src="../assets/课程.png" height="25">
                        </span>
                        <span class="tab_span">课程</span>
                    </template>
                </el-tab-pane>

                <el-tab-pane label="合集和列表" name="third">
                    <template #label>
                        <span class="custom-tabs-label">
                            <!-- <el-icon :size="20" class="tab_icon" style="margin-left: 10px;">
                                <House />
                            </el-icon> -->
                            <img src="../assets/合集3.png" height="25">
                        </span>
                        <span class="tab_span">合集和列表</span>
                    </template>
                </el-tab-pane>
                <el-tab-pane label="收藏" name="fourth">
                    <template #label>
                        <span class="custom-tabs-label">
                            <!-- <el-icon :size="20" class="tab_icon" style="margin-left: 10px;">
                                <StarFilled />
                            </el-icon> -->
                            <img src="../assets/收藏.png" height="25">
                        </span>
                        <span class="tab_span">收藏</span>
                    </template>
                </el-tab-pane>
            </el-tabs>
        </div>

        <div class="base_margin Main_div ">
            <div class="Course_div">
                <!-- <span>这里是课程主要内容</span> -->
                <span class="Course_header_span">
                    <el-text size="large">发布视频</el-text>
                    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane label="最新发布" name="first">
                            <template #label>
                                <span class="tab_span">最新发布</span>
                            </template>
                        </el-tab-pane>
                        <el-tab-pane label="最多播放" name="second">
                            <template #label>

                                <span class="tab_span">最多播放</span>
                            </template>
                        </el-tab-pane>

                        <el-tab-pane label="最多收藏" name="third">
                            <template #label>
                                <span class="tab_span">最多收藏</span>
                            </template>
                        </el-tab-pane>

                    </el-tabs>
                </span>
                <el-row :gutter="18" style="margin-left: 200px;margin-right: 200px">
                    <el-col :span="6" v-for="(item) in Courses">
                        <CourseCard :course="item"></CourseCard><br>
                    </el-col>
                </el-row>
            </div>
            <div class="Right_div">
                <span>这里是广告内容</span>
            </div>
            <div>

            </div>



        </div>

        <div class="Advertisement_div">

        </div>


    </div>
</template>
<script setup>
import CourseCard from '@/components/CourseCard.vue';
import { ref, onMounted, onUnmounted, reactive, toRefs } from 'vue';
import { House, StarFilled } from '@element-plus/icons-vue'



const Courses = ref();
const state = reactive({
    circleUrl:
        'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    squareUrl:
        'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',

})
const UserMessage = ref({
    username: "zzj",
    usernote: "什么也没写",
    likenum: 10,
    fansnum: 20,
    learntime: 30,

});


const { circleUrl, squareUrl } = toRefs(state)


</script>
<style scoped>
:deep(.my-label) {
    background: var(--el-color-success-light-9) !important;
}

:deep(.my-content) {
    background: var(--el-color-danger-light-9);
}

.base_margin {
    margin-left: 120px;
    margin-right: 120px;
}

.background_div {

    background-color: F4F5F7;

    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;

    .Top_div {
        background-color: white;
        /* margin-left: var(--global-margin-left)px;
        margin-right: 10%; */
        padding: 0%;
        /* width: 80%; */
        /* height: 23%; */
        height: 200px;
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)),
            url("../assets/燕学园个人中心.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        text-align: left;


    }

    .Top_base_div {
        position: relative;
        margin-top: 100px;
        margin-left: 2.5%;
        /* width: 50%; */
        width: 90%;
        display: flex;

        .Top_avater_div {
            position: relative;
            margin-top: 2%;
            flex: 0;
        }

        .Top_Message_div {
            position: relative;
            margin-left: 1%;
            flex: 9;
        }

        .Top_details_div {
            position: relative;
            margin-top: 2%;
            margin-left: 10%;
            background-color: rgba(178, 182, 240, 0.3);
            width: 35%;

            justify-content: flex-end;
            text-align: center;

            .column {
                .text {
                    margin-top: 10px;
                    color: #838b92;
                    width: auto;
                    height: auto;
                }

                .number {
                    color: #222;
                    font-size: 24px;
                    width: auto;
                    height: auto;
                }
            }
        }
    }

    .Top_options_div {
        margin-top: 10px;
        height: 50px;
        display: flex;
        background-color: white;

        .custom-tabs-label {
            vertical-align: middle;

            .tab_icon {}


        }

        .tab_span {
            margin-bottom: 3px;
            font-size: 14px;
        }


    }

    .Main_div {
        margin-top: 10px;
        height: 23%;
        display: flex;

        .Course_div {
            float: left;
            background-color: white;
            width: 80%;

            .Course_header_span {
                display: flex;

                .el-text {
                    margin-right: 20px;
                    margin-left: 5px;
                    font-size: 30px;
                }
            }
        }

        .Right_div {
            float: right;
            background-color: white;
            width: 10%;
            margin-left: 5%;
        }
    }
}

.underline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: black;
    transition: width 0.3s ease;
}

.el-tabs__item.is-active .underline {
    width: 100%;
}
</style>